import React, { useState,useEffect,useContext } from 'react'
import { Checkbox, Button } from 'antd-mobile'
import Header from '../../components/Header/Header'
import "./Shop.less"
import { reqcartlist, reqcartdelete, reqcartedit } from '../../http/api'
import { $pre } from '../../http/http'
import { Stepper, Manual, DemoBlock, Toast } from 'antd-mobile'
import { filterPrice } from "../../filters";
import {MyContext} from '../../App'


const Shop = (props)=>{
    let {state:{userInfo}} = useContext(MyContext)
    const [list,setList] = useState([])
    const [allChecked,setAllChecked] = useState(false)
    const [isRequest, setIsRequest] = useState(true)
    const [allPrice,setAllPrice] = useState(0)
    const [select_num,setSelect_num] = useState(0)
   


//获取列表
    useEffect(()=>{
        getList()
    },[])



  
    const getList=async()=> {
        let res = await reqcartlist({
            uid: JSON.parse(sessionStorage.getItem("userInfo")).uid
        })
        if (res.data.code === 200) {
            // ①先处理数据
            let list1 = res.data.list[1].content ? res.data.list[1].content : []
            let list2 = res.data.list[0].content ? res.data.list[0].content : []
             let list3 = [...list1,...list2]
             setIsRequest(true)
            list3.forEach((item) => {
                // ②如果之前选中，新增数量后仍然是选中的状态
                let obj = list.find((list) => list.id === item.id);
                // ③如果之前有选中状态，就按照之前的，如果没有就false
                item.checked = obj ? obj.checked : false;
            })
console.log(list);

            setList(list3)
            getAllPrice()
            getSelect_num()



        }
    }

    // 增加商品 |
   let add=async(id, num)=> {
       console.log(allPrice);
       
        if (num <= 4) {
          if (isRequest) {
            setIsRequest(false)
            let res = await reqcartedit({ id: id, type: 2 });
            if (res.data.code == 200) {
              Toast.show({
                content: res.data.msg,
              });
              //请求列表
              getList()
            }
          }
        } else {
          Toast.show({
            content: "限购五件",
          });
        }
      }
    // 减少商品
   let sub= async(id, num) =>{
        if (num > 1) {
          // 由于用户可能多次连点，为了防止连点多次发请求，所以设置一个状态isRequest,真就发请求，假就不能发请求。
          // 一旦要发请求，立刻将isRequest=false，直到新的列表回来了，才将它改为isRequest=true,方便下一次请求。
          if (isRequest) {
            setIsRequest(false)
            let res = await reqcartedit({ id: id, type: 1 });
            if (res.data.code == 200) {
              Toast.show({
                content: res.data.msg,
              });
              //请求列表
             getList()
          
            }
          }
        } else {
          Toast.show({
            content: "宝贝不能再少了",
          });
        }
      }
    // 5删除商品
   const deleteShop=async(id)=> {
        let res = await reqcartdelete({ id: id })
        if (res.data.code === 200) {
            // 弹唱提醒
            Toast.show({
                icon: 'success',
                content: res.data.msg
            })
            // 重新请求列表
            getList()
        }
    }
    // 点击全选
    let changeAll =(val)=> {
        // console.log(val);
        // 设置state中的数据(修改全选布尔值)
       
        setAllChecked(val)

        // 遍历carList所有的布尔值，同步allChecked
        list.forEach((item) => {
            item.checked = val
        })
        // 修改仓库的数据
      
        setList(list)
        // 计算出总价
        getAllPrice()
        // 计算总数
        getSelect_num()
    }
    // 7选中全部商品---全选按钮也选中
    let changeOne = (val, id)=> {
        // console.log('本次勾选', val, id, '全选状态是', allChecked);
        // 找到点击的商品
        let obj = list.find((item) => {
            return item.id == id
        })
        // 修改它的布尔值
        obj.checked = val
        // 修改数据库的数据
        setList(list)

        // 遍历carList中的每一项，所有的checked全是真返回真()
        let bol = list.every((item) => {
            return item.checked
        })
        // 修改state中的值
      
        setAllChecked(bol)

        // 计算出总价
        getAllPrice()
        // 计算总数
        getSelect_num()
    }
    // 8显示总价封装的函数
    let getAllPrice =()=> {
       var allPrice = list.reduce(
            (total, item) =>
                item.checked ? (total + item.num * item.price) : total, 0
        )
       console.log(allPrice);
       
        setAllPrice(allPrice)
    }
    //9显示总数量封装的函数
   let getSelect_num = ()=> {
       var select_num = list.reduce(
            (total, item) => item.checked ? total + item.num : total, 0
        )
       
        setSelect_num(select_num)
    }
    // 10结算商品
   let account=()=> {
        // 弹窗成功
        Toast.show({
            icon: 'success',
            content: '结算成功',
        })
        // 跳转页面
    }
   
       
        return (
            <div className='car'>
                <Header back title="购物车"></Header>
                {list.length == 0 ? <div>暂无数据</div> :
                    list.map((item) => {
                        return (
                            <div className='car_content' key={item.id}>
                                <div className='car_left'>
                                    <Checkbox
                                        onChange={(val) => { changeOne(val, item.id) }}
                                        checked={item.checked}
                                    ></Checkbox>
                                    <img className='car_left_img' src={$pre + item.img} alt={item.goodsname} />
                                </div>

                                <div className='car_right'>
                                    <h1>{item.goodsname}</h1>
                                    <p>价格：{filterPrice(item.price)}元</p>
                                    <div>
                                        <Button
                                            size='mini'
                                            color='default'
                                            onClick={() => { sub(item.id,item.num) }}
                                        >-</Button>

                                        <span>{item.num}</span>

                                        <Button size='mini' color='primary'
                                            onClick={() => { add(item.id,item.num) }}
                                        >+</Button>
                                    </div>
                                    <Button color='danger' onClick={() => { deleteShop(item.id) }}>删除商品</Button>
                                </div>
                            </div>
                        )
                    })
                }
                <footer className='car_footer'>
                    <div className='car_footer_count'>
                        <Checkbox
                            disabled={list.length == 0}
                            checked={allChecked}
                            onChange={(val) => { changeAll(val) }}
                        >全选</Checkbox>
                        <span>总价：{allPrice.toFixed(2)}</span>
                        <span>总数：{select_num}</span>
                        <Button color='danger'
                            onClick={() => { props.history.push("/coupon") }}
                        >优惠券</Button>
                    </div>

                    <Button block
                        color='primary'
                        size='large'
                        onClick={() => { account() }}
                    >
                        点击结算
                    </Button>


                </footer>
            </div>




        )
    }

    export default Shop;

